<script setup lang="ts">
import { ref,onMounted} from 'vue'
import type { SlidesArray } from './components/type'
import Carousel from './components/Carousel.vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

onMounted(()=>{
  userStore.getUserInfo()
})


const slides = ref<SlidesArray>([
  {
    image: 'https://picsum.photos/id/237/600/400',
    alt: '图片1',
    title: '图片标题1',
    description: '图标描述1',
  },
  {
    image: 'https://picsum.photos/id/238/600/400',
    alt: '图片2',
    title: '图片标题2',
    description: '图标描述2',
  },
  {
    image: 'https://picsum.photos/id/239/600/400',
    alt: '图片3',
    title: '图片标题3',
    description: '图标描述3',
  },
])
</script>

<template>
  <Carousel :slides="slides" :interval="2000" />
  <div style="width: 100px; height: 100px; border: 1px solid black">{{userStore.UserInfo.username }}</div>
</template>

<style lang="scss" scoped></style>
